<template>
  <div class="box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/exercise' }">任务管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/exercise/addExercise">添加任务</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-loading="VLoading" class="describe">
      <el-descriptions class="margin-top" title="添加任务" :column="3" border>
        <template #extra>
          <el-button @click="Tsave" type="primary">保存</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">任务数量</div>
          </template>
          <el-input-number v-model="Tcount" :min="1" :max="1000000" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">最小难度</div>
          </template>
          <el-input-number v-model="min" :min="1" :max="1000000" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">最大难度</div>
          </template>
          <el-input-number v-model="max" :min="1" :max="1000000" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">组织</div>
          </template>
          <el-cascader ref="myCader" placeholder="请选择组织" :options="options" @change="Orgs" :props="props" collapse-tags
            clearable>
          </el-cascader>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">开始时间</div>
          </template>
          <el-date-picker v-model="begintime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">结束时间</div>
          </template>
          <el-date-picker v-model="endtime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">任务标签</div>
          </template>
          <el-select v-model="Ttype" placeholder="任务标签">
            <el-option label=".Net" value=".Net" />
            <el-option label="Java" value="Java" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">是否为固定任务</div>
          </template>
          否
          <el-switch v-model="Tfixation" class="ml-2" style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            " />是
        </el-descriptions-item>
        <el-descriptions-item v-if="Tfixation == true">
          <template #label>
            <div class="cell-item">固定周期</div>
          </template>
          <el-select v-model="Tcycle" placeholder="任务标签">
            <el-option label="7" value=7 />
            <el-option label="10" value=10 />
            <el-option label="15" value=15 />
            <el-option label="30" value=30 />
          </el-select>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { AddExercise } from "@/utils/Exam/exercise/addExercise";
import { OrganizationProduct, UserProduct } from '@/api/Product/index'
import { Task } from "@/api/Product/exaam";
import router from "@/router";
import { ElMessage } from "element-plus";

const _exam = new Task();
const _user = new UserProduct();
const _arrang = new OrganizationProduct();

export default defineComponent({
  setup() {
    const data = reactive<AddExercise>({
      Tname: "",
      Tcount: 0,
      Torganization: "",
      Tendtime: "",
      Ttype: '',
      Tperiod: "",
      Tfixation: false,
      begintime: "",
      endtime: "",
      Tcycle: "",
      VLoading: false,
      min: 0,
      max: 0,
      children: [],
      options: [],
      props: { multiple: true },
      orgs: [],
    });
    const methods = {
      GetArarnge() {
        _arrang.GetOrganization().then((res: any) => {
          if (res.code === 0) {
            res.data.forEach((e: any) => {
              data.options.push({
                value: e.id,
                label: e.name,
                children: data.children
              });
              e.children.forEach((d: any) => {
                data.children.push({
                  value: d.id,
                  label: d.name
                });
              })
            });
          }
        })
      },
      Orgs(val: any) {
        data.orgs = [];
        val.forEach((d: any) => {
          d.forEach((e: any) => {
            data.orgs.push(e)
          });
        });
      },
      unique10() {
        return Array.from(new Set(data.orgs))
      },
      //添加任务
      Tsave() {
        data.VLoading = true;
        let orgids = "";
        methods.unique10().forEach((d: any) => {
          orgids += d + ",";
        });
        orgids = orgids.substring(0, orgids.length - 1);
        let dto = {
          tcount: data.Tcount,
          tminLv: data.min,
          tmaxLv: data.max,
          tlabels: data.Ttype,
          tbeginTime: new Date(data.begintime),
          tendTime: new Date(data.endtime),
          tcycle: Number(data.Tcycle),
          torgIds: orgids
        }
        _exam.AddTask(dto).then(((res: any) => {
          if (res.code === 0) {
            data.VLoading = false;
            ElMessage.success(res.message)
            router.push("/exercise");
          }
        }))
      },
    };
    onMounted(() => {
      methods.GetArarnge();
    })
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
</style>
